<template>
  <div>
    <div style="margin: 20px 10px">
      <el-form
        class="centre-6-1"
        ref="form"
        inline
        :model="selectFrom"
        label-width="80px"
        size="mini"
      >
        <el-form-item label="手机号">
          <el-input v-model="selectFrom.userAccount"></el-input>
        </el-form-item>
        <el-form-item label="卡号">
          <el-input v-model="selectFrom.cardNumber"></el-input>
        </el-form-item>

        <el-form-item label="审核状态">
          <el-select
            v-model="selectFrom.refundStatus"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 用户列表区 -->
      <el-table
        :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }"
        id="tableTop"
        :data="tableList"
        size="mini"
        border
        stripe
      >
        <el-table-column label="姓名" prop="userName"></el-table-column>
        <el-table-column label="手机号" prop="userAccount"></el-table-column>
        <el-table-column label="卡号" prop="cardNumber"></el-table-column>
        <el-table-column label="卡名称" prop="cardName"></el-table-column>
        <el-table-column
          label="申请退卡日期"
          prop="createDateTime"
        ></el-table-column>
        <el-table-column label="退卡部门" prop="deptName"></el-table-column>
        <el-table-column label="退卡人" prop="adminName"></el-table-column>
        <el-table-column
          label="应退现金"
          prop="refundActualAmount"
        ></el-table-column>
        <el-table-column
          label="应退预留款"
          prop="refundReserveAmount"
        ></el-table-column>
        <el-table-column
          label="应退金币"
          prop="refundGoldAmount"
        ></el-table-column>

        <el-table-column label="退款方式" prop="refundType">
          <template slot-scope="scope">
            <template v-if="scope.row.refundType == 'backtracking'"
              >原路退回</template
            >
            <template v-if="scope.row.refundType == 'reserveAmount'"
              >退预留款</template
            >
            <template v-if="scope.row.refundType == 'bankCard'"
              >退银行卡</template
            >
          </template>
        </el-table-column>
        <el-table-column label="审核状态" prop="refundStatus">
          <template slot-scope="scope">
            <template v-if="scope.row.refundStatus == 'stayAudit'"
              >待审核</template
            >
            <template v-if="scope.row.refundStatus == 'passAudit'"
              >审核通过</template
            >
            <template v-if="scope.row.refundStatus == 'refuseAudit'"
              >审核不通过</template
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="refunddetails(scope.row)"
              >修改</el-button
            >
            <!-- <el-button
              type="primary"
              size="mini"
              @click="refunddetails(scope.row)"
              >详情</el-button
            > -->
            <el-button
              id="btnAudit"
              type="primary"
              size="mini"
              @click="getrefundApprovedMethod(scope.row)"
              >审核</el-button
            >
            <!-- <el-button
              id="btnAudit"
              type="danger"
              size="mini"
              @click="getrefuseRefundMethod(scope.row)"
              >取消审核</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 15, 20]"
        :page-size="selectFrom.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal"
      >
      </el-pagination>
      <!-- 修改详情 -->
      <el-dialog
        title="修改"
        :visible.sync="editDialogVisible"
        width="70%"
        center
        :close-on-click-modal='false'
      >
        <el-form
          size="mini"
          :model="refundCardInfo"
          :rules="refundCardInfoRules"
          ref="refundCardInfo"
          label-width="110px"
          class="demo-ruleForm"
          inline
        >
          <div>
            <h3 class="item_title">会员信息</h3>
            <el-form-item label="姓名" prop="name">
              <el-input
                disabled
                size="mini"
                v-model="refundCardInfo.userName"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="name">
              <el-input
                disabled
                size="mini"
                v-model="refundCardInfo.userAccount"
              ></el-input>
            </el-form-item>
            <el-form-item label="卡号" prop="name">
              <el-input
                disabled
                size="mini"
                v-model="refundCardInfo.cardNumber"
              ></el-input>
            </el-form-item>
            <el-form-item label="卡名称" prop="name">
              <el-input
                disabled
                size="mini"
                v-model="refundCardInfo.cardName"
              ></el-input>
            </el-form-item>
          </div>
          <div>
            <h3 class="item_title">退款信息</h3>
            <el-form-item label="申请退卡日期" prop="name">
              <el-date-picker
                disabled
                size="mini"
                type="date"
                placeholder="选择日期"
                v-model="refundCardInfo.createDateTime"
                style="width: 202px"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="退卡部门" prop="name">
              <el-input
                disabled
                size="mini"
                v-model="refundCardInfo.deptName"
              ></el-input>
            </el-form-item>
            <el-form-item label="退卡人" prop="name">
              <el-input
                disabled
                size="mini"
                v-model="refundCardInfo.adminName"
              ></el-input>
            </el-form-item>
            <el-form-item label="支付现金金额" prop="name">
              <el-input
                disabled
                size="mini"
                v-model="refundCardInfo.actualPayAmount"
              ></el-input>
            </el-form-item>
            <el-form-item label="支付预留款金额" prop="name">
              <el-input
                disabled
                size="mini"
                v-model="refundCardInfo.reserveAmount"
              ></el-input>
            </el-form-item>
            <el-form-item label="支付金币金额" prop="name">
              <el-input
                disabled
                size="mini"
                v-model="refundCardInfo.goldAmount"
              ></el-input>
            </el-form-item>
            <div>
              <h3 class="item_title">扣款项</h3>
              <div class="item_title">
                <el-button type="primary" size="mini" @click="addReturnFreeItem"
                  >添加</el-button
                >
              </div>

              <div
                v-for="(item, index) in refundCardInfo.cardRefundOrderItemBOS"
                :key="index"
              >
                <el-form-item
                  :prop="'cardRefundOrderItemBOS[' + index + '].deductionName'"
                  :rules="refundCardInfoRules.deductionName"
                >
                  <span slot="label"> {{ index + 1 }}、扣款项 </span>
                  <el-input size="mini" v-model="item.deductionName"></el-input>
                </el-form-item>
                <el-form-item
                  label="扣款金额"
                  :prop="
                    'cardRefundOrderItemBOS[' + index + '].deductionAmount'
                  "
                  :rules="refundCardInfoRules.deductionAmount"
                >
                  <el-input
                    size="mini"
                    v-model="item.deductionAmount"
                  ></el-input>
                </el-form-item>
                <el-form-item label="扣款项备注" prop="name">
                  <el-input
                    style="width: 190px"
                    size="mini"
                    v-model="item.deductionRemark"
                  ></el-input>
                  <i
                    class="el-icon-delete"
                    @click="delReturnFreeItem(index)"
                  ></i>
                </el-form-item>
              </div>
              <el-form-item
                label="应退现金"
                prop="refundActualAmount"
                :rules="refundCardInfoRules.refundActualAmount"
              >
                <el-input
                  size="mini"
                  v-model="refundCardInfo.refundActualAmount"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="应退预留款"
                prop="refundReserveAmount"
                :rules="refundCardInfoRules.refundReserveAmount"
              >
                <el-input
                  size="mini"
                  v-model="refundCardInfo.refundReserveAmount"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="应退金币"
                prop="refundGoldAmount"
                :rules="refundCardInfoRules.refundGoldAmount"
              >
                <el-input
                  size="mini"
                  v-model="refundCardInfo.refundGoldAmount"
                ></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="退款方式" prop="name">
                <el-radio-group v-model="refundCardInfo.refundType" size="mini">
                  <el-radio label="backtracking">原路退回</el-radio>
                  <el-radio label="reserveAmount">退预留款</el-radio>
                  <el-radio label="bankCard">退银行卡</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>

            <div v-if="refundCardInfo.refundType == 'bankCard'">
              <el-form-item
                label="开户人名称"
                prop="bankCardName"
                :rules="refundCardInfoRules.bankCardName"
              >
                <el-input
                  size="mini"
                  v-model="refundCardInfo.bankCardName"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="开户城市"
                prop="bankCardNumber"
                :rules="refundCardInfoRules.bankCardNumber"
              >
                <el-input
                  size="mini"
                  v-model="refundCardInfo.bankCardNumber"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="应退金币"
                prop="bankCardCity"
                :rules="refundCardInfoRules.bankCardCity"
              >
                <el-input
                  size="mini"
                  v-model="refundCardInfo.bankCardCity"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="银行名称"
                prop="bankName"
                :rules="refundCardInfoRules.bankName"
              >
                <el-input
                  size="mini"
                  v-model="refundCardInfo.bankName"
                ></el-input>
              </el-form-item>
            </div>
            <div>
              <h3 class="item_title">退卡原因</h3>
              <el-form-item label="退卡原因" prop="name">
                <el-input
                  size="mini"
                  v-model="refundCardInfo.refundCause"
                ></el-input>
              </el-form-item>
              <el-form-item label="其他原因" prop="name">
                <el-input
                  size="mini"
                  v-model="refundCardInfo.refundOtherCause"
                ></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            v-if="refundCardInfo.refundStatus != 'passAudit'"
            @click="submitForm('refundCardInfo')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 审核确认弹窗 -->
      <el-dialog
        title="审核"
        :visible.sync="auditSureDialogVisible"
        width="30%"
        center
      >
        <el-radio-group v-model="refundStatus">
          <el-radio label="passAudit">通过审核</el-radio>
          <el-radio label="refuseAudit">审核不通过</el-radio>
        </el-radio-group>
        <span slot="footer" class="dialog-footer">
          <el-button @click="auditSureDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="getrefundApproved()"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 取消确认弹窗 -->
      <!-- <el-dialog
        title="取消审核"
        :visible.sync="auditCencelDialogVisible"
        width="30%"
        center
      >
        <span>请确认取消审核</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="auditCencelDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="getrefuseRefund()">确 定</el-button>
        </span>
      </el-dialog> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 查询数据
      selectFrom: {
        userAccount: null, //卡号
        cardNumber: null, //手机号
        refundStatus: "stayAudit",
        pageNo: 1,
        pageSize: 10,
      },
      // 审核状态枚举
      statusList: [
        {
          value: "stayAudit",
          label: "待审核",
        },
        {
          value: "passAudit",
          label: "审核通过",
        },
        {
          value: "refuseAudit",
          label: "审核不通过",
        },
      ],
      // 表格数据
      tableList: [],
      // 总条数
      pageTotal: 0,
      // 修改详情按钮
      editDialogVisible: false,
      refundCardInfo: {},
      // 详情扣款项集合
      cardRefundOrderItemBOS: [],
      // 校验
      refundCardInfoRules: {
        refundReserveAmount: [
          { required: true, message: "请输入应退预留款", trigger: "blur" },
        ],
        refundGoldAmount: [
          { required: true, message: "请输入应退金币", trigger: "blur" },
        ],
        refundActualAmount: [
          { required: true, message: "请输入应退现金", trigger: "blur" },
        ],
        bankCardName: [
          { required: true, message: "请输入开户人名称", trigger: "blur" },
        ],
        bankCardNumber: [
          { required: true, message: "请输入银行卡卡号", trigger: "blur" },
        ],
        bankCardCity: [
          { required: true, message: "请输入开户城市", trigger: "blur" },
        ],
        bankName: [
          { required: true, message: "请输入银行名称", trigger: "blur" },
        ],
        deductionName: [
          { required: true, message: "请输入扣款项名称", trigger: "blur" },
        ],
        deductionAmount: [
          { required: true, message: "请输入扣款金额", trigger: "blur" },
        ],
      },
      // 确认审核弹窗
      auditSureDialogVisible: false,
      // 确认审核id
      auditSureid: "",
      // 审核状态
      refundStatus: "passAudit",

      // auditCencelid: "",

      format: "yyyy-MM-dd HH:mm:ss",

      // 多选框
      checked: true,
      Querydata: [],
      // 退卡id
      orderId: "",
      // 部门列表数据
      departmentsList: [],
    };
  },

  methods: {
    // 确认审核按钮
    getrefundApprovedMethod(row) {
      this.auditSureid = row.id;
      this.auditSureDialogVisible = true;
    },
    getrefuseRefundMethod(row) {
      this.auditCencelid = row.orderId;
      this.auditCencelDialogVisible = true;
    },
    // 详情按钮
    refunddetails(row) {
      console.log(row);

      this.$axios
        .getRefundCardInfo({
          id: row.id,
        })
        .then((res) => {
          if (res.code == "00000") {
            console.log(res);
            this.editDialogVisible = !this.editDialogVisible;
            this.refundCardInfo = res.data.cardRefundOrderInfo;
            this.refundCardInfo.cardRefundOrderItemBOS =
              res.data.cardRefundOrderItemBOS;
          }
        });

      // if (row.state == "refuseRefund" || row.state == "refundApproved") {
      //   this.$router.push({
      //     name: "cardVerification",
      //     params: {
      //       state: "详情",
      //       customerCardId: row.orderId,
      //     },
      //   });
      // } else if (row.state == "applyRefund") {
      //   this.$router.push({
      //     name: "cardVerification",
      //     params: {
      //       state: "修改",
      //       customerCardId: row.orderId,
      //     },
      //   });
      // } else {
      //   this.$message({
      //     message: "无效的审核状态",
      //     type: "warning",
      //   });
      // }
    },
    // 新增选项
    addReturnFreeItem() {
      let obj = { deductionName: "", deductionAmount: "", deductionRemark: "" };
      this.refundCardInfo.cardRefundOrderItemBOS.push(obj);
    },
    // 点击删除
    delReturnFreeItem(indexv) {
      this.refundCardInfo.cardRefundOrderItemBOS.splice(indexv, 1);
    },
    //分页
    handleSizeChange(value) {
      this.selectFrom.pageSize = value;
      this.getAuditRefundCardList();
    },
    handleCurrentChange(value) {
      this.selectFrom.pageNo = value;
      this.getAuditRefundCardList();
    },

    search() {
      this.selectFrom.pageNo = 1;
      this.selectFrom.pageSize = 10;
      this.getAuditRefundCardList();
    },

    // 调用审核列表接口
    getAuditRefundCardList() {
      this.$axios
        .getAuditRefundCardList({
          pageNo: this.selectFrom.pageNo,
          pageSize: this.selectFrom.pageSize,
          userAccount: this.selectFrom.userAccount,
          cardNumber: this.selectFrom.cardNumber,
          refundStatus: this.selectFrom.refundStatus,
        })
        .then((res) => {
          if (res.code == "00000") {
            this.tableList = res.data.records;
            this.pageTotal = res.data.total;
          }
        });
    },
    // 修改确定按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.getUpdRefundCardInfo();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 修改接口
    getUpdRefundCardInfo() {
      this.$axios
        .getUpdRefundCardInfo({
          id: this.refundCardInfo.id,
          refundReserveAmount: this.refundCardInfo.refundReserveAmount,
          refundGoldAmount: this.refundCardInfo.refundGoldAmount,
          refundActualAmount: this.refundCardInfo.refundActualAmount,
          refundType: this.refundCardInfo.refundType,
          bankCardName: this.refundCardInfo.bankCardName,
          bankCardNumber: this.refundCardInfo.bankCardNumber,
          bankCardCity: this.refundCardInfo.bankCardCity,
          bankName: this.refundCardInfo.bankName,
          refundCause: this.refundCardInfo.refundCause,
          refundOtherCause: this.refundCardInfo.refundOtherCause,
          cardRefundOrderItemBOS: this.refundCardInfo.cardRefundOrderItemBOS,
        })
        .then((res) => {
          if (res.code == "00000") {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.getAuditRefundCardList();
            this.editDialogVisible = !this.editDialogVisible;
            this.refundCardInfo = {};
          }
        });
    },

    // 通过退卡审核接口
    getrefundApproved() {
      this.$axios
        .getupdRefundCardAuditStatus({
          id: this.auditSureid,
          refundStatus: this.refundStatus,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.getAuditRefundCardList();
            this.auditSureDialogVisible = false;
            this.$message({
              message: "成功",
              type: "success",
            });
          }
        });
    },

    //取消审核
    getrefuseRefund() {
      this.$axios
        .getrefuseRefund({
          returnCardId: this.auditCencelid,
        })
        .then((res) => {
          if (res.code == "200") {
            this.getAuditRefundCardList();

            this.auditCencelDialogVisible = false;
            this.$message({
              message: "取消退卡审核成功",
              type: "success",
            });
          }
        });
    },
  },

  mounted() {
    this.getAuditRefundCardList();
  },
};
</script>
<style scoped>
el-table-column {
  background-color: #f2f2f2;
}

#searchBtn {
  background-color: #54dac9;
  color: #fff;
}
.item_title {
  margin: 10px 0 10px 30px;
}
</style>